<template>
  <!-- 首页 -->
  <div id='homepage'>
    <!-- 搜索框 -->
    <div style="height:1.333rem;"></div>
    <div class="boxseach" @click="$router.push('/searchIndex')">
      <search v-model="valueSerach"
              :active="active"
              @returnBack="returnBack"
              @returnBack1="returnBack1" />
    </div>
    <!-- banner图 -->
    <div class="banner box" @click="isShowVipPay = true">
      <img src="@/assets/two/homepageban.png"
           alt="">
    </div>
    <!-- 直播+商品+达人+素材的分析 -->
    <div class="analysis box">
      <div class="analy"
           @click="$router.push('/liveRank')">
        <img src="@/assets/two/live.png"
             alt="">
        <p>直播分析</p>
      </div>
      <div class="analy"
           @click="$router.push('/goods')">
        <img src="@/assets/two/shopping.png"
             alt="">
        <p>商品分析</p>
      </div>
      <div class="analy"
           @click="$router.push('/talent')">
        <img src="@/assets/two/talent.png"
             alt="">
        <p>达人分析</p>
      </div>
      <!-- <div class="analy"
           @click="$router.push('/sucai')">
        <img src="@/assets/two/douyin.png"
             alt="">
        <p>抖音素材</p>
      </div> -->
    </div>
    <p class="bgbg"></p>
    <!-- 直播销量榜 -->
    <div class="live">
      <div class="h3 box">
        <h3>直播销量榜</h3>
        <p class="boximg"
           @click="$router.push('/liveRank')"><img src="@/assets/two/more.jpg"
               alt="更多"></p>
      </div>
      <div class="liveslide">
        <div class="boxlive">
          <div class="box03Item"
               v-for="(item, index) in hotRoomShow"
               :key="'r' + index">
            <div class="bgImg"
                 @click="lives(item.author_id,item.room_id)">
              <img :src="item.room_logo" />
              <div class="mask"></div>
            </div>
            <div class="hot">
              <img src="@/assets/two/hot.png">
              <p>{{ format_num(item.score) }}</p>
            </div>
            <div class="userInfo">
              <img :src="item.logo" />
              <p @click="lives(item.author_id,item.room_id)">{{ item.nickname }}</p>
            </div>
          </div>
        </div>
      </div>
      <p class="bgbg"></p>
    </div>
    <!-- 商业排行榜 -->
    <div class="good">
      <div class="h3 box"
           @click="$router.push('/goods')">
        <h3>商品排行榜</h3>
        <p class="boximg"
           @click="$router.push('/goods')"> <img src="@/assets/two/more.jpg"
               alt="更多"></p>
      </div>
      <div class="bgboxgood">
        <div class="goodslide">
          <div class="boxitem"
               v-for="(item, index) in hotgoods"
               :key="'r' + index">
            <img :src="item.logo"
                 @click="goods(item.pro_id)" />
            <h4 @click="goods(item.pro_id)">{{item.title}}</h4>
            <p>￥{{item.price}}</p>
            <span>日销量:{{format_num(item.sale_incr)}}</span>
          </div>
        </div>
      </div>
    </div>
    <p class="bgbg"></p>
    <!-- 达人排行榜 -->
    <div class="talent">
      <div class="h3 box"
           @click="$router.push('/talent')">
        <h3>达人排行榜</h3>
        <p class="boximg"> <img src="@/assets/two/more.jpg"
               alt="更多"
               @click="$router.push('/talent')"></p>
      </div>
      <div class="boxtalent box"
           v-for="(item, i) in talentList"
           :key="i + 't'"
           @click="todatails(item.authorId)">
        <!-- 左侧 -->
        <div class="left">
          <div class="rank"
               :class="sstt[i]"
               v-if="i<=8">
            <p :class="num[i]">{{i+1}}</p>
          </div>
          <div class="rank1"
               v-else>
            <p :class="num[i]">{{ i + 1 }}</p>
          </div>
          <div class="img">
            <van-image round
                       :src="item.logo" />
          </div>
        </div>
        <!-- 右侧 -->
        <div class="right">
          <div class="wid">
            <p class="name">{{ item.nickName }}</p>
          </div>
          <div class="total">
            <div>
              <span>{{ format_num(item.totalFans) }}</span>
              <span>粉丝总数</span>
            </div>
            <div>
              <span>{{ format_num(item.favoriteIncr) }}</span>
              <span>点赞增量</span>
            </div>
            <div>
              <span>{{ format_num(item.commentIncr) }}</span>
              <span>评论增量</span>
            </div>
            <div>
              <span>{{ format_num(item.shareIncr) }}</span>
              <span>转发增量</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import search from '@/component/search_my'
export default {
  name: 'demo',
  components: { search },
  data() {
    return {
      valueSerach: '',
      active: '',
      keyword: '',
      hotRoomShow: [],
      cancel02: null,
      hotgoods: [],
      talentList: [],
      sstt: ['ss1', 'ss2', 'ss3', 'ss4'],
      num: ['num1', 'num2', 'num3'],
      Time: '',
      isShowVipPay:true
    }
  },
  watch: {
    active: function (newValue, oldValue) {
      this.valueSerach = ''
      this.keyword = ''
      this.get_data()
    },
  },
  created() {},
  mounted() {
    this.getday()
    this.getRoom()
    this.PostRankList()
    this.GetTalentList()
  },
  methods: {
    // 头部搜索栏
    returnBack(a) {
      this.page = 1
      this.keyword = a
      let str = this.trimStr(this.keyword).substr(0, 100)
      // let str = this.str
      // let theKeywords = ''
      // 对搜索词编码  escape不对* @ - _ + . / 编码 所以单独转
      // theKeywords = encodeURIComponent(str)
      // console.log(encodeURIComponent(str))
      // if (this.keyword.indexOf('*') > -1) {
      //   theKeywords = this.keyword.replace(/\*/g, '%2A')
      // }
      // if (this.keyword.indexOf('@') > -1) {
      //   theKeywords = this.keyword.replace(/\@/g, '%40')
      // }
      // if (this.keyword.indexOf('-') > -1) {
      //   theKeywords = this.keyword.replace(/\-/g, '%2D')
      // }
      // if (this.keyword.indexOf('_') > -1) {
      //   theKeywords = this.keyword.replace(/\_/g, '%5F')
      // }
      // if (this.keyword.indexOf('+') > -1) {
      //   theKeywords = this.keyword.replace(/\+/g, '%2B')
      // }
      // if (this.keyword.indexOf('.') > -1) {
      //   theKeywords = this.keyword.replace(/\./g, '%2E')
      // }
      // if (this.keyword.indexOf('/') > -1) {
      //   theKeywords = this.keyword.replace(/\//g, '%2F')
      // }
      // if (this.keyword.indexOf('%') > -1) {
      //   theKeywords = this.keyword.replace(/\%/g, '%25')
      // }
      if (this.keyword != '') {
        this.$router.push({
          path: `/myheader?keyword=${str}`,
        })
      }
    },
    returnBack1(a) {
      this.keyword = a
    },
    search() {
      this.valueSerach = this.trimStr(this.valueSerach)
      this.page = 1
      this.keyword = String(this.valueSerach)
      this.get_data()
    },
    navToSearch() {
      this.valueSerach = this.trimStr(this.valueSerach)
      this.page = 1
      this.keyword = String(this.valueSerach)
      this.get_data()
    },
    //跳转达人详情
    todatails(id) {
      this.$router.push({ path: '/talentDetailsMain', query: { id } })
    },
    //跳转商品详情
    goods(id) {
      this.$router.push({ path: '/goodsDetailsMain', query: { id: id } })
    },
    //跳转直播详情
    lives(author_id, room_id) {
      this.$router.push({
        path: '/LiveForDetailsMain',
        query: { author_id, room_id },
      })
    },
    // 搜索框的搜索接口
    get_data() {
      let that = this
      this.loading = true
      this.is_show_result = true
      this.loading_01 = true
      this.$axios({
        method: 'get',
        url: '/api/search',
        params: {
          keyword: that.keyword,
        },
      })
        .then((response) => {
          if (response.data && response.data.code == 0) {
            this.loading = false
            this.response = response.data.data
            this.loading_01 = false
          } else if (response.data.code == 1003) {
            this.loading = false
            this.loading_01 = false
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 直播销量榜
    getRoom() {
      let that = this
      that.$axios
        .get('/api/live/GetLiveProHourRank', {
          cancelToken: new that.$axios.CancelToken(function executor(c) {
            if (that.cancel02 != null) {
              that.cancel02()
            }
            that.cancel02 = c
          }),
        })
        .then((res) => {
          if (res.data.code == 0) {
            that.roomList = res.data.data
            if (that.roomList.length >= 10) {
              that.hotRoomShow = that.roomList.slice(0, 10)
            } else {
              that.hotRoomShow = that.roomList
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 商品排行榜
    PostRankList() {
      let that = this
      // 时间 13:00前只能看前两天的 13:00后看前一天的
      let time = new Date()
      let d = new Date()
      let h = d.getHours()
      if (h >= 13) {
        time = that.timestamp(Number(new Date()) / 1000 - 24 * 60 * 60, 'Y-M-D')
      } else {
        time = that.timestamp(Number(new Date()) / 1000 - 48 * 60 * 60, 'Y-M-D')
      }
      that.$axios
        .post('/api/product/PostDYVolumeRanks', {
          type: 2,
          CategoryId: 0,
          RankType: 1,
          ProFrom: -1,
          Gender: '不限',
          Age: '不限',
          Time: time, //时间
          Keyword: '',
          Index: 1,
          Size: 10,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.hotgoods = this.hotgoods.concat(res.data.data.ranks)
          } else if (res.data.code == 1003) {
          }
        })
        .catch((err) => {})
    },
    //达人排行榜
    GetTalentList() {
      let that = this
      this.$axios
        .post('/fansRankTrade', {
          listtype: 3,
          category: 0,
          rankType: 1,
          fans: 0, //粉丝数
          isshop: 0, //是否带货
          date: this.Time, //时间
          key: '',
          pagesize: 10,
          pageindex: 1,
          provinceId: 721879,
          //     cityId: 110,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.talentList = this.talentList.concat(res.data.data.list)
          } else if (res.data.code == 1003) {
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 获取时间
    getDay(day) {
      var today = new Date()
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
      today.setTime(targetday_milliseconds) //注意，这行是关键代码
      var tYear = today.getFullYear()
      var tMonth = today.getMonth()
      var tDate = today.getDate()
      tMonth = this.doHandleMonth(tMonth + 1)
      tDate = this.doHandleMonth(tDate)
      let h = today.getHours()
      var i
      if (h > 13) {
        var i = 1
      } else {
        i = 2
      }

      return tYear + '-' + tMonth + '-' + tDate
    },
    doHandleMonth(month) {
      var m = month
      if (month.toString().length == 1) {
        m = '0' + month
      }
      return m
    },
    //当前日默认时间
    getday() {
      this.Time = this.getDay(-1)
    },
  },
}
</script>
<style scoped lang='less'>
#homepage {
  .boxseach {
    width: 100%;
    background: #fff;
    position: fixed;
    z-index: 22;
    top: -0.08rem;
    padding-bottom: 10px;
  }
  .box {
    width: 9.44rem;
    margin: 0 auto;
  }
  // banner图
  .banner {
    width: 9.226rem;
    height: 3.04rem;
    margin-bottom: 0.666rem;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  // 直播+商品+达人+素材
  .analysis {
    display: flex;
    justify-content: center;
    .analy:last-of-type {
      margin-right:0;
    }
    .analy {
      // width: 1.84rem;   //四个图标
      width: 33.33%;   //3个图标
      margin-right: 0.613rem;
      img {
        display: inline-block;
        height: 1.04rem;
        // margin: 0 0.3rem;   //四个图标
        margin:0 0.74rem;   // 三个图标
      }
      p {
        font-size: 0.346667rem;
        height: 0.346667rem;
        line-height: 0.346667rem;
        text-align: center;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #888888;
        padding-bottom: 0.64rem;
      }
    }
  }
  // 直播销量榜
  .live {
    .h3 {
      display: flex;
      justify-content: space-between;
      h3 {
        height: 0.4rem;
        line-height: 0.4rem;
        font-family: PingFangSC-Medium;
        font-size: 0.4rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 1px;
        color: #222222;
        padding-bottom: 0.4rem;
        padding-top: 0.4rem;
        padding-left: 0.16rem;
      }
      .boximg {
        width: 1.4rem;
        height: 100%;
        padding-bottom: 0.4rem;
        padding-top: 0.4rem;
        text-align: right;
        img {
          display: block;
          width: 0.213333rem;
          height: 0.32rem;
          position: relative;
          right: -70%;
        }
      }
    }
    //直播销量榜展示
    .liveslide {
      width: 100%;
      .boxlive:first-of-type {
        margin-left: 4%;
      }
      .boxlive::-webkit-scrollbar {
        display: none;
      }
      .boxlive {
        // height: 3.6rem;
        max-width: 9.6rem;
        overflow-y: hidden;
        overflow-x: auto;
        display: flex;
        margin-bottom: 0.4rem;
        .box03Item {
          width: 2.853rem;
          // height: 3.573rem;
          height: 3.6rem;
          margin-right: 0.266rem;
          position: relative;
          > .bgImg {
            position: relative;
            width: 2.853rem; //214
            height: 3.6rem; //268
            .mask {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background: rgba(20, 20, 12, 0.2);
              border-radius: 0.213333rem;
            }
            img {
              display: block;
              width: 2.853rem; //214
              height: 3.573rem; //268
              border: 1px solid #e5e5e5;
              border-radius: 0.213333rem;
              object-fit: cover;
            }
          }
          .hot {
            position: absolute;
            top: 0.133333rem;
            right: 0.133333rem;
            display: flex;
            // width: 1.866667rem;
            padding:0 0.16rem;
            height: 0.48rem;
            line-height: 0.48rem;
            background-color: rgba(20, 20, 12, 0.5);
            border-radius: 0.24rem;
            > img {
              display: block;
              width: 0.213rem;
              height: 0.266rem;
              margin: 0.086rem 0.0933rem 0 0;
            }
            > p {
              display: block;
              height: 0.48rem;
              line-height: 0.48rem;
              font-family: DINPro-Medium;
              font-size: 0.32rem;
              font-stretch: normal;
              letter-spacing: 1px;
              color: #ffffff;
            }
          }
          .userInfo {
            width: 2.7rem;
            display: flex;
            position: absolute;
            left: 0.133rem;
            bottom: 0.133rem;
            > img {
              width: 0.693rem;
              height: 0.693rem;
              border: 1px solid #e5e5e5;
              border-radius: 50%;
              margin-right: 0.16rem;
            }
            > p {
              width: 1.72rem;
              font-size: 0.32rem;
              line-height: 0.693rem;
              letter-spacing: 1px;
              color: #ffffff;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
  // 商品排行榜
  .good {
    width: 100%;
    .h3 {
      display: flex;
      justify-content: space-between;
      h3 {
        height: 0.4rem;
        line-height: 0.4rem;
        font-size: 0.4rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 1px;
        color: #222222;
        padding-bottom: 0.4rem;
        padding-top: 0.4rem;
        padding-left: 0.16rem;
      }
      .boximg {
        width: 1.4rem;
        height: 100%;
        padding-bottom: 0.4rem;
        padding-top: 0.4rem;
        text-align: right;
        img {
          display: block;
          width: 0.213333rem;
          height: 0.32rem;
          position: relative;
          right: -70%;
        }
      }
    }
    .bgboxgood {
      width: 100%;
      .goodslide:first-of-type {
        margin-left: 4%;
      }
      .goodslide::-webkit-scrollbar {
        display: none;
      }
      .goodslide {
        max-width: 9.6rem;
        overflow-y: hidden;
        overflow-x: auto;
        display: flex;
        > .boxitem {
          width: 2.853rem;
          margin-right: 0.266rem;
          > img {
            width: 2.853333rem;
            height: 2.853333rem;
            border: 1px solid #e5e5e5;
            border-radius: 0.213333rem;
          }
          h4 {
            width: 2.853333rem;
            height: 0.96rem;
            line-height: 0.48rem;
            font-size: 0.373rem;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #222222;
            padding-top: 0.106667rem;
            padding-left: 0.026rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          p {
            font-size: 0.48rem;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ff0000;
            font-family: Dinpro-medium;
            padding: 0.1rem 0 0.1rem 0.04rem;
          }
          > span {
            display: block;
            line-height: 0.346667rem;
            font-size: 0.346667rem;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #888;
            padding: 0 0 0.373333rem 0.04rem;
          }
        }
      }
    }
  }
  // 达人排行榜
  .talent {
    width: 100%;
    .h3 {
      display: flex;
      justify-content: space-between;
      h3 {
        height: 0.4rem;
        line-height: 0.4rem;
        font-family: PingFangSC-Medium;
        font-size: 0.4rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 1px;
        color: #222222;
        padding-bottom: 0.4rem;
        padding-top: 0.4rem;
        padding-left: 0.16rem;
      }
      .boximg {
        width: 1.4rem;
        height: 100%;
        padding-bottom: 0.4rem;
        padding-top: 0.4rem;
        text-align: right;
        img {
          display: block;
          width: 0.213333rem;
          height: 0.32rem;
          position: relative;
          right: -70%;
        }
      }
    }
    .boxtalent:last-of-type {
      border-bottom: none;
      padding-bottom: 1.6rem;
    }
    .boxtalent {
      width: 9.2rem;
      display: flex;
      margin-bottom: 0.2rem;
      border-bottom: 1px solid #e5e5e5;
    }
    .left {
      width: 1.68rem;
      position: relative;
      .img {
        width: 1.2rem;
        height: 1.2rem;
        margin-top: 0.266667rem;
        margin-left: 0.253333rem;
        border: 1px solid #e5e5e5;
        border-radius: 50%;
        .van-image--round {
          width: 100%;
          height: 100%;
        }
      }
      .rank {
        position: absolute;
        top: 0.14rem;
        left: 0.12rem;
        z-index: 1;
        width: 0.52rem;
        height: 0.52rem;
        background: url(../../assets/two/fire.png) no-repeat center;
        background-size: 100% 100% !important;
        p {
          font-size: 0.373333rem;
          text-align: center;
          line-height: 0.56rem;
          color: #666666;
          font-family: DINPro-Medium;
        }
      }
      .rank1 {
        background: #f1f1f1;
        // height: .453333rem;
        // line-height: .453333rem;
        border-radius: 0.226667rem;
        position: absolute;
        top: 0.14rem;
        left: 0.12rem;
        z-index: 1;
        padding: 0.06rem 0.133333rem 0.03rem;
        p {
          font-size: 0.373333rem;
          line-height: 1;
          text-align: center;
          color: #666666;
          font-family: DINPro-Medium;
        }
      }
    }
    .right {
      width: 7.493rem;
      padding-left: 0.3rem;
      .wid {
        display: flex;
        margin-top: 0.36rem;
        .name {
          max-width: 6rem;
          font-size: 0.373rem;
          color: #222;
          text-align: left;
          line-height: 0.453rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .total {
        display: flex;
        margin-top: 0.266rem;
        div {
          width: 1.893rem;
          span {
            display: block;
            text-align: left;
          }
          span:nth-of-type(1) {
            display: block;
            font-size: 0.373333rem;
            line-height: 0.373333rem;
            color: #222;
            // font-family: Dinpro-medium;
            font-family: Dinpro-medium;
          }
          span:nth-of-type(2) {
            display: block;
            font-size: 0.29333rem;
            color: #888;
            line-height: 0.266rem;
            padding: 0.2rem 0 0.24rem 0;
          }
        }
        div:nth-of-type(4) {
          width: 1.7333rem;
        }
      }
    }
  }
  //板块划分
  .bgbg {
    width: 100%;
    height: 0.186667rem;
    background: #f1f1f1;
  }
}
</style>